<template>
  <div class="app-header">
    <div class="app-nav flex-row-between flex-row-center">
      <div></div>
      <div class="user-box">
        <el-space :size="15">
          <span class="click flex-row-center">
            {{ $g.session.data || "没有公司名称" }}
            <Icon icon="Xiajiantou"></Icon>
          </span>
          <span class="click flex-row-center">
            <Icon icon="User"></Icon>
            {{ $g.session.data || "未登录" }}
          </span>
          <span class="click flex-row-center" @click="signOut">
            <Icon icon="Tuichu"></Icon>
            退出
          </span>
        </el-space>
      </div>
    </div>
    <div class="bread-crumb flex-row-between flex-row-center">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }" v-for="item in $route.matched" :key="item">{{ item.meta.name }}</el-breadcrumb-item>
        <!-- <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
      </el-breadcrumb>
      <!-- <img class="logo" :src="'img/logo.png'" /> -->
    </div>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import { menu } from "@/router/router.js";
export default {
  extends: BaseComponent,
  name: "AppNav",
  data() {
    return {
      mode: undefined //"horizontal"
    };
  },
  computed: {
    user() {
      return (this.$app.session || {}).user || {};
    },
    menuActiveName() {
      let route = this.$route || {};
      return route.name;
    },
    menuList() {
      // return this.$app.session.menus || [];
      // let permissions = (this.$app.session || {}).permissions || [];
      // let platform = permissions.find((item) => item.path == "/") || {};
      return menu;
    }
  },
  created() {},
  mounted() {},
  methods: {
    signOut() {
      this.$router.push("/login");
    }
  }
};
</script>
<style>
.app-header {
  background: #fff;
  flex-shrink: 0;
  padding: 10px;
}
.app-nav {
  height: 50px;
  flex-shrink: 0;
}
.el-space__item span .el-icon {
  margin: 0 5px;
}
.bread-crumb {
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  padding: 0 10px;
  height: 22px;
  flex-shrink: 0;
  border-left: 4px solid var(--el-color-primary);
}
</style>
